<template>
  <div class="check-page">
    <checkheader title="账本详情" @fatherMethod="fatherMethod"></checkheader>
    <div class="muicontent">
      <div class="check-details">
        <ul class="check-ul">
          <li class="check-content">
            <p class="content-title">
              <span>{{data.itemName}}</span>
            </p>
            <div class="content-div">
              <ul class="content-table">
                <li>
                  <span>收包时间</span>
                  <span>{{data.collectionTime ? data.collectionTime : '--'}}</span>
                </li>
                <li>
                  <span>卖包时间</span>
                  <span>{{data.sellOutTime ? data.sellOutTime : '--'}}</span>
                </li>

                <li>
                  <span>持有时间</span>
                  <span>{{data.holdingTime ? data.holdingTime+'天' : '--'}}</span>
                </li>
              </ul>
              <ul class="content-table">
                <li>
                  <span>收包价</span>
                  <span>
                    <i class="font-color">{{data.collectionPrice ? "￥"+data.collectionPrice : '--'}}</i>
                  </span>
                </li>
                <li>
                  <span>卖包价</span>
                  <span>
                    <i class="font-color">{{data.sellOutPrice ?"￥"+ data.sellOutPrice : '--'}}</i>
                  </span>
                </li>

                <li>
                  <span>利润率</span>
                  <span>
                    <i class="font-color">{{data.profit ? data.profit+"%" : '--'}}</i>
                  </span>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <div class="details">详情</div>
      <ul class="specification">
        <li class="specification-li" v-for="(item,index) in details" :key="index">
          <span class="specification-span">{{item.name}}</span>
          <span>{{item.detail}}</span>
        </li>
      </ul>
      <div class="details-img">
        <img :src="data.picture_url" alt />
      </div>
    </div>
  </div>
</template>

<script>
import checkheader from './checkHeader'
export default {
  name: 'checkDetails',
  data () {
    return {
      data: '',
      details: [
        { name: '品牌', detail: '' },
        { name: '系列', detail: '' },
        { name: '编码', detail: '' },
        { name: '成色', detail: '' }
      ]
    }
  },
  methods: {
    fatherMethod () {
      // 返回我的账本页面
      this.$router.push({ name: 'mycheck' })
    },
    loadData () {
      this.$http.get(`${this.baseUrl.findAccountBookInfo}` + '?accountBookId=' + this.$route.query.goodsId).then((res) => {
        if (res.data.code === 200) {
          this.data = res.data.data
          this.details[0].detail = res.data.data.brandId
          this.details[1].detail = res.data.data.serial
          this.details[2].detail = res.data.data.code
          this.details[3].detail = res.data.data.colour
        }
      })
    }
  },
  components: {
    checkheader
  },
  mounted () {
    this.loadData()
  }
}
</script>

<style lang="stylus" scoped>
.muicontent {
  position: absolute;
  top: 0.9rem;
  bottom: 0rem;
  left: 0;
  right: 0;
  overflow-y: auto;

  .check-details {
    border-top: 0.01rem solid $color-content-border;

    .check-ul {
      width: 100%;

      .check-content {
        padding: 0.25rem 0rem 0rem 0.4rem;

        .content-title {
          font-size: 0.32rem;
          color: $color-text;
          font-weight: 700;
          margin-bottom: 0.3rem;

          span {
            height: 0.45rem;
            display: inline-block;
          }
        }

        .content-div {
          display: flex;
          flex: 1;

          .content-table {
            width: 50%;

            li {
              width: 100%;
              padding-bottom: 0.4rem;
              height: 0.28rem;
              span {
                display: inline-block;
                font-size: 0.24rem;
                text-align: left;

                &:nth-child(1) {
                  color: $color-content-text;
                  padding-right: 0.1rem;
                }

                &:nth-of-type(2) {
                  color: $color-text;
                }

                .font-color {
                  font-size: 0.28rem;
                  color: $color;
                }
              }
            }
          }
        }
      }
    }
  }

  .details {
    height: 0.7rem;
    line-height: 0.7rem;
    background-color: $color-search;
    padding-left: 0.3rem;
    font-size: 0.32rem;
    color: $color-search-text;
  }

  .specification {
    padding: 0.35rem 0 0 0.35rem;

    .specification-li {
      font-size: 0.32rem;
      color: $color-details;
      margin-bottom: 0.25rem;

      .specification-span {
        margin-right: 1.2rem;
      }
    }
  }

  .details-img {
    padding-top: 1rem;
    width: 100%;
    // height: 5rem;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
